<template>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <el-form size="mini" ref="form" label-position="left" :model="form" label-width="120px">
                    <el-form-item label="商品分类">
                        <el-select clearable v-model="form.region" placeholder="请选择商品分类">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input clearable style="width:50%" placeholder="请输入商品名称"  v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="轮播图" prop="covers">
                        <el-upload
                        :action="baseUrl"
                        :headers="Headers"
                        :file-list="imgList"
                        :limit="6"
                        list-type="picture-card"
                        :on-success="handlePictureCardSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                           <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-divider content-position="left"></el-divider>
                    <h4>库存价格设置</h4>
                    <!-- <el-divider content-position="left"></el-divider> -->
                    <el-form-item label="拼团类型" prop="radio">
                        <el-radio-group v-model="form.radio">
                            <el-radio :label="3">参与拼团</el-radio>
                            <el-radio :label="6">直接购买</el-radio>
                        </el-radio-group>
                    </el-form-item >
                    <template v-if="form.radio == 3">
                        <el-form-item label="拼团单价">
                            <el-input clearable style="width:50%" placeholder="请输入拼团价格" type="number"  min="0" v-model="form.price"></el-input>
                        </el-form-item>
                        <el-form-item label="开团人数">
                            <el-input clearable style="width:50%" placeholder="请输入开团人数" type="number"  min="0" v-model="form.min_people"></el-input>
                        </el-form-item> 
                        <el-form-item label="拼中人数">
                            <el-input clearable style="width:50%" placeholder="请输入拼中人数" type="number"  min="0" v-model="form.people"></el-input>
                        </el-form-item>
                    </template>
                    <el-form-item v-else label="单买价">
                        <el-input clearable style="width:50%" placeholder="请输入单买价" type="number"  min="0" v-model="form.price"></el-input>
                    </el-form-item>  
                    <el-form-item label="商品库存">
                        <el-input clearable style="width:50%" placeholder="请输入商品库存" type="number"  min="0" v-model="form.people"></el-input>
                    </el-form-item> 
                    <el-form-item label="成本价">
                        <el-input clearable style="width:50%" placeholder="请输入成本价" type="number"  min="0" v-model="form.people"></el-input>
                    </el-form-item> 
                    <el-form-item label="库存预警值">
                        <el-input clearable style="width:50%" placeholder="请输入库存预警值" type="number"  min="0" v-model="form.people"></el-input>
                    </el-form-item>
                    <el-divider content-position="left"></el-divider>
                    <h4>运费模板</h4>
                    <el-form-item label="运费模板">
                        <el-select clearable v-model="form.region" placeholder="请选择运费模板">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="商品详情" prop="desc">             
                      <template>
                              <wang-editor :value="form.desc" @editorChane="editorChane"></wang-editor>
                      </template>
                    </el-form-item>                           
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import  { qiniuUrl  }  from '@/config'
import wangEditor from '@/components/wangEditor'
export default {
    name:'good_add',
    components:{ wangEditor },
    data() {
        return {
            baseUrl:qiniuUrl,
            imgList:[],
            dialogVisible:false,
            dialogImageUrl:'',
            form: {
                name: '',
                covers:[],
                desc: '',
                radio:3,
            }
        }
    },
    computed:{
        Headers(){
            return {
                token:''
            }
        }
    },
    methods:{
        onSubmit() {
            console.log('submit!');
        },

        // 富文本数据获取
        editorChane(e){
            this.form.desc = e
        },

          //   图片上传
        handleRemove(file, fileList) {
            // console.log(file, fileList);
            if (fileList.length == 0) {
            this.form.covers = [];
            return;
            }
            this.form.covers = [];
            fileList.map((item, i) => {
            // console.log(item);
            this.form.covers[i] = item.response
                ? item.response.data.url
                : item.url;
            });
        },

        handlePictureCardSuccess(response, file, fileList){
            // console.log(response)
            if(response.status === 0){
            this.form.covers.push(response.data.url)
            }
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    }
}
</script>

<style lang="scss" scoped>
.content{
    .line{
        text-align: center;
    }
}
</style>